<template>
  <u-popup :show="show" mode="center"  @close="closeHandle" bgColor="transparent">
   <view class="discount-modal-a-wrapper">
      <view class="img-bg-wrapper">
        
        <image class="img-bg" :src="staticImgs.bg" mode=""></image>
      </view>
      <image class="img-flash rotating" :src="staticImgs.bgFlash" mode=""></image>
      <view class="placehoder-box"></view>
      <view class="discount-modal-a-position">
        
        <view class="discount-modal-a">
          <view class="top-box">
              <view class="row-1">
                <template v-if="discountNumStr == '10'">
                  <view class="text-1">0</view>
                  <view class="text-2">元</view>  
                </template>
                <template v-else>
                  <view class="text-1">{{discountNumStr || 6}}</view>
                  <view class="text-2">折</view>  
                </template>
              </view>
              <view class="row-2">{{tipTxt}}</view>
          </view>
          <view class="bottom-box">
            <!-- 点击领取 -->
            <image class="img" :src="btnImg" @click="closeHandle" mode=""></image>
          </view>
        </view>
      
      </view>

    </view>
  </u-popup>
</template>

<script>
  import {
    getUserDiscount
  } from '@/common/api/user_api.js'
  export default{
    props:{
      discountNum:{
        type:[Number,String],
        default:8
      },
      visible:{
        type:Boolean,
        default:false
      },
      tipTxt:{
        type:String,
        default:"全场测评通用券",
      },
      btnType:{
        type:String,
        default:''
      },
    },
    computed:{
      discountNumStr(){
        // 如果是10.00，显示10
        try{
          return this.discountNum.toString().split('.')[0]
        }catch(e){
          return this.discountNum
        }
      },
      btnImg(){
        return this.btnType ? this.staticImgs.btnImgV3 : this.staticImgs.btnImg
      }
    },
    data(){
      return {
        show:false,
        staticImgs:{
          bg: this.imgBaseURL + '/scl/new_scl_coupon_modal_bg.png',
          bgFlash: this.imgBaseURL + '/scl/scl_coupon_modal_bg_1-v2-flash.png',
          btnImg: this.imgBaseURL + '/scl/scl-coupon-confirm-btn-v2.png',
          btnImgV3: this.imgBaseURL + '/scl/scl-coupon-confirm-btn-v3.png',
        },
        hourNum:3
      }
    },
    watch:{
      visible:{
        handler(val){
          this.show = val
        },
        immediate:true
      }
    },
    methods:{
      closeHandle(){
        this.show = false
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  /* 定义旋转动画效果 */
  @keyframes rotate {
   0% {
              transform: rotate(0);
          }
  
          25% {
              transform: rotate(90deg);
          }
  
          50% {
              transform: rotate(180deg);
          }
  
          75% {
              transform: rotate(270deg);
          }
  
          100% {
              transform: rotate(360deg);
          }
  
  }
  
  .rotating{
    animation: rotate 5s linear infinite;
    -webkit-animation: rotate 5s linear infinite;
  }
  .discount-modal-a-wrapper{
    position: relative;
    .img-bg-wrapper{
      
      display: flex;
      justify-content: center;
      position: absolute;
      z-index: 999;
      top: 0;
      left: 0;
      right: 0;
      .img-bg{
        // width: 638rpx;
        // height: 806rpx;
        width: 618rpx;
        height: 820rpx;
        margin: auto;
      }
    }
    .img-flash{
      width: 360rpx;
      height: 360rpx;
      position: absolute;
      z-index: 998;
      top: -68rpx;
      left: 0;
      right: 0;
      margin: auto;
    }
    .placehoder-box{
      height: 898rpx;
      width: 750rpx;
    }
    .discount-modal-a-position{
      position: absolute;
          display: flex;
          justify-content: center;
              flex-direction: column;
          top: 0;
      left: 0;
      right: 0;
      z-index: 999;
      .discount-modal-a{
          width: 704rpx;
          height: 794rpx;
          margin: auto;
          box-sizing: border-box;
          // display: flex;
          // flex-direction: column;
          // align-items: center;
          // justify-content: center;
          .top-box{
            display: flex;
            flex-direction: column;
            align-items: center;
            // justify-content: center;
            .row-1{
                margin-top: 330rpx;
                display: flex;
                    align-items: flex-end;

                .text-1{
                  font-family: SourceHanSansCN, SourceHanSansCN;
                  font-weight: bold;
                  font-size: 120rpx;
                  color: #F93B51;
                  line-height: 102rpx;
                  font-style: normal;
                }
                .text-2{
                  margin-left: 8rpx;
                  font-family: SourceHanSansCN, SourceHanSansCN;
                  font-weight: bold;
                  font-size: 40rpx;
                  color: #F93B51;
                  line-height: 60rpx;
                  text-align: left;
                  font-style: normal;
                }
            }
              
              .row-2{
                width: 230rpx;
                height: 55rpx;
                border-radius: 28rpx;
                border: 1rpx solid #826D6E;
                margin-top: 24rpx;
                
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #333333;
                line-height: 55rpx;
                text-align: center;
                font-style: normal;
              }
              
                .row-3{
                  margin-top: 14rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #333333;
                  line-height: 40rpx;
                  // text-align: left;
                  font-style: normal;
                  
                  display: flex;
                }
              

              
            }
            

            
            
            
          }
          
          .bottom-box{
            margin-top: 104rpx;
            display: flex;
            justify-content: center;
            .img{
              width: 440rpx;
              height: 140rpx;
            }
          }
        
        .tip-text{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #C22F15;
          line-height: 33rpx;
          text-align: center;
          font-style: normal;
        }
        
      }
    
  }
  
  

                
</style>